<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item of newlist" :key="item.id">
        <router-link :to="'/home/newsdetail/'+item.id">
          <img class="mui-media-object mui-pull-left" :src="item.img_url" />
          <div class="mui-media-body">
            <h2>{{item.title}}</h2>
            <p class="mui-ellipsis">
                <span>{{item.add_time | dateformat | updata}}</span>
                <span>点击 : {{item.click}}次</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script> 
import {Toast} from 'mint-ui'
export default {
  name: "NewsList",
  data(){
      return{
          newlist:[]
      }
  },
  created(){
      this.getnewlist();
  },
  methods:{
    //   获取数据
      getnewlist(){
          this.$http.get('api/getnewslist').then((result) => {
            //   console.log(result.body)
              var data=result.body
              if(data.status===0){
                  this.newlist=data.message
              }else{
                  Toast('请求数据失败')
              }
          }).catch((err) => {
              console.log(err)
          });
      }
  }
};
</script>

<style lang="scss" scoped>
.mui-table-view{
    padding-bottom: 1rem;
    .mui-table-view-cell{
        .mui-media-body{
            h2{
                font-size: .28rem
            }
            .mui-ellipsis{
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>